<template>
  <Row class="data-dictionary ">
    <Col span="24" class="col-main">
      <Form label-position="top">
        <Row>
          <Col span="20">
            <Row>
              <Col span="5" v-if="this.personType === 1">
                <FormItem label style="margin-bottom: 14px;">
                  <Select
                    v-model="formData.enterpriseId"
                    style="width: 90%;"
                    ref="treeSelect"
                    placeholder="请选择机构"
                  >
                    <Option
                      v-for="item in list1"
                      :value="item.enterpriseId"
                      :key="item.enterpriseId"
                      style="display: none;"
                      >{{ item.title }}</Option
                    >
                    <Tree
                      :data="orgList"
                      ref="tree"
                      style="padding-left:20px"
                      @on-select-change="checkEng"
                    ></Tree>
                  </Select>
                </FormItem>
              </Col>
              <Col span="5">
                <FormItem label style="margin-bottom: 14px;">
                  <Select
                    v-model="formData.projectTeamId"
                    style="width: 90%;"
                    ref="treeSelectPro"
                    :clearable="proList.length > 0 && personType != 3"
                    placeholder="请选择项目"
                  >
                    <Option
                      v-for="item in proList"
                      :value="item.id"
                      :key="item.id"
                      >{{ item.shortName }}</Option
                    >
                  </Select>
                </FormItem>
              </Col>
              <Col span="5">
                <FormItem label style="margin-bottom: 14px;">
                  <Input
                    clearable
                    style="width: 90%;"
                    v-model="formData.constructionPointName"
                    placeholder="工点名称"
                  />
                </FormItem>
              </Col>
              <Col span="5">
                <FormItem label style="margin-bottom: 14px;">
                  <Select
                    clearable
                    v-model="formData.isWork"
                    style="width: 90%;"
                    placeholder="是否在施"
                  >
                    <Option
                      v-for="item in pointState"
                      :value="item.id"
                      :key="item.id"
                      >{{ item.name }}</Option
                    >
                  </Select>
                </FormItem>
              </Col>
              <Col span="5">
                <FormItem label style="margin-bottom: 14px;">
                  <Select
                    clearable
                    v-model="formData.distRiskGrade"
                    style="width: 90%;"
                    placeholder="工点风险等级"
                  >
                    <Option
                      v-for="item in riskLevelList"
                      :value="item.id"
                      :key="item.id"
                      >{{ item.name }}</Option
                    >
                  </Select>
                </FormItem>
              </Col>
              <Col span="5">
                <FormItem label style="margin-bottom: 14px;">
                  <Select
                    clearable
                    v-model="formData.riskCategoryId"
                    style="width: 90%;"
                    placeholder="作业风险类别"
                  >
                    <Option
                      v-for="item in riskCategoryList"
                      :value="item.id"
                      :key="item.id"
                      >{{ item.riskCategoryName }}</Option
                    >
                  </Select>
                </FormItem>
              </Col>
              <Col span="5">
                <FormItem label style="margin-bottom: 14px;">
                  <Input
                    clearable
                    style="width: 90%;"
                    v-model="formData.riskName"
                    placeholder="作业风险名称"
                  />
                </FormItem>
              </Col>
            </Row>
          </Col>
          <Col span="4" style="text-align: right;">
            <div class="button-s">
              <Button
                type="primary"
                style="margin-right: 15px"
                @click="searchBtn"
                >查询</Button
              >
              <!--<Button type="warning" @click="resetBtn">重置</Button>-->
            </div>
          </Col>
        </Row>
      </Form>
      <Card style="margin-bottom: 10px;background:#F5F8FC;" dis-hover>
        <Row style="margin-bottom: 15px">
          <Col span="12">动态辨识总数 : {{ riskCount.total }}</Col>
        </Row>
        <Row>
          <Col span="24" class="span_margin10">
            <span>I级类型 : {{ riskCount.firstLevel }}</span>
            <span>II级类型 : {{ riskCount.secondLevel }}</span>
            <span>III级类型 : {{ riskCount.thirdLevel }}</span>
            <span>IV级类型 : {{ riskCount.fourthLevel }}</span>
            <span v-for="item in riskCount.riskInfo" :key="item">
              {{ item.name }} : {{ item.count }}
            </span>
            <!--<span>环境风险 : {{riskCount.environmentRisk}}</span>
          <span>作业风险 : {{riskCount.taskRisk}}</span>
          <span>社会风险 : {{riskCount.societyRisk}}</span>
          <span>政治风险 : {{riskCount.politicsRisk}}</span>
          <span>自身风险 : {{riskCount.selfRisk}}</span>-->
          </Col>
        </Row>
      </Card>
      <Tabs value="1" @on-click="tabpaneBtn">
        <TabPane :label="label" name="1"> </TabPane>
        <TabPane :label="label1" name="2"> </TabPane>
        <TabPane :label="label2" name="3"> </TabPane>
        <TabPane :label="label3" name="4"> </TabPane>
      </Tabs>
      <Table border ref="selection" :columns="columns" :data="dictList">
        <template slot-scope="{ row, index }" slot="action">
          <span
            title="销号"
            class="button-class"
            type="text"
            @click="destroyBtn(row)"
            >销号</span
          >
          <span
            title="详情"
            class="button-class"
            type="text"
            @click="destroyBtn(row, 'detail')"
            >详情</span
          >
        </template>
      </Table>
      <Page
        class="pagination"
        :page-size-opts="[10, 20, 50, 100]"
        :total="page.total"
        :current="page.current"
        :page-size="page.pageSize"
        @on-change="pageChange"
        @on-page-size-change="sizeChange"
        show-elevator
        show-sizer
        show-total
      />
      <Modal v-model="destroyModal" :mask-closable="false" title="销号">
        <Form :show-message="false" :label-width="80">
          <FormItem
            label="销号"
            prop="formData.description"
            property="true"
            :required="true"
          >
            <Input
              v-model="formData.description"
              type="textarea"
              maxlength="500"
              :autosize="{ minRows: 5, maxRows: 5 }"
              placeholder="请输入销号说明"
            ></Input>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="text" size="large" @click="destroyModal = false"
            >取消</Button
          >
          <Button type="primary" size="large" @click="saveItem">确定</Button>
        </div>
      </Modal>
      <!--:mask-closable="false"-->
    <Modal
      v-model="detailModal"
      width="70%"
      :footer-hide="true"
      title="详情">
      <Form :show-message="false" :label-width="180">
        <Form  label-position="top" class="modal-content">
          <Row >
            <Col span="12">
              <FormItem label="公司名称">
                <Input class="width90" v-model.trim="detailData.enterpriseName" readonly/>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="项目名称" >
                <Input class="width90" v-model.trim="detailData.projectName" readonly/>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="工点名称">
                <Input class="width90" v-model.trim="detailData.constructionPointName" readonly/>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="工点风险等级">
                <Input class="width90" v-model.trim="detailData.distRiskGrade"  readonly/>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="起始时间">
                <Input class="width90" v-model.trim="detailData.startTime" readonly/>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="结束时间">
                <Input class="width90" v-model.trim="detailData.endTime" readonly/>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="是否在施">
                <Input class="width90" v-model.trim="detailData.isWork" readonly/>
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem label="工点描述">
                <Input style="width: 95%" type="textarea" v-model.trim="detailData.constructionPointDescription" readonly/>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="作业风险名称">
                <Input class="width90" v-model.trim="detailData.riskName"  readonly/>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="作业风险类型">
                <Input class="width90" v-model.trim="detailData.riskCategoryNames" readonly/>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="作业风险等级">
                <Input class="width90" v-model.trim="detailData.riskLevelName" readonly/>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="分级方法">
                <Input class="width90" v-model.trim="detailData.classificationMethodName" readonly/>
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem label="具体风险描述">
                <Input style="width: 95%" type="textarea" v-model.trim="detailData.riskDescription" readonly/>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </Form>
      <!--<div slot="footer">
        <Button type="text" size="large" @click="detailModal = false"
        >取消</Button>
      </div>-->
      </Modal>
    </Col>
  </Row>
</template>

<script>
export default {
  name: 'risk-elimination-add',
  data() {
    return {
      userDetail: JSON.parse(localStorage.getItem('userList')),
      personType: JSON.parse(localStorage.getItem('personType')),
      formData: {
        name: '',
        number: 2,
        isDestroy: '0',
        projectId: '',
        pointName: '',
        riskLevel: '1',
        enterpriseId: '',
        projectTeamId: '',
        description: '',
        constructionPointName: '',
        isWork: '',
        riskName: '',
        distRiskGrade: 0,
        riskCategoryId: ''
      },
      riskCategoryList: [],
      riskLevelList: [
        {
          id: '1',
          name: 'Ⅰ级'
        },
        {
          id: '2',
          name: 'Ⅱ级'
        },
        {
          id: '3',
          name: 'Ⅲ级'
        },
        {
          id: '4',
          name: 'Ⅳ级'
        }
      ],
      pointState: [
        {
          id: 1,
          name: '是'
        },
        {
          id: 2,
          name: '否'
        }
      ],
      destroyModal: false,
      detailModal: false,
      detailData: '',
      riskCount: {},
      countData: '',
      rowData: '',
      list: [],
      list1: [],
      orgList: [], //机构树
      proList: [], //项目部树
      label: h => {
        return h('div', [
          h(
            'span',
            {
              style: {
                color: '#EF3E43'
              }
            },
            'Ⅰ级风险'
          )
        ])
      },
      label1: h => {
        return h(
          'span',
          {
            style: {
              color: '#F86A30'
            }
          },
          'Ⅱ级风险'
        )
      },
      label2: h => {
        return h(
          'span',
          {
            style: {
              color: '#F3CF34'
            }
          },
          'Ⅲ级风险'
        )
      },
      label3: h => {
        return h(
          'span',
          {
            style: {
              color: '#3D6FC9'
            }
          },
          'Ⅳ级风险'
        )
      },
      dictList: [],
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 70,
          render: (h, params) => {
            return h(
              'span',
              params.index + (this.page.current - 1) * this.page.pageSize + 1
            )
          }
        },
        {
          title: '公司名称',
          key: 'enterpriseName',
          align: 'center',
          tooltip: true
        },
        {
          title: '项目名称',
          key: 'projectName',
          align: 'center',
          tooltip: true
        },
        {
          title: '工点名称',
          key: 'workpointName',
          align: 'center',
          tooltip: true
        },
        {
          title: '是否在施',
          key: 'isWork',
          align: 'center',
          width: 100
        },
        {
          title: '工点风险等级',
          align: 'center',
          key: 'distRiskGrade'
        },
        {
          title: '作业风险类别',
          key: 'riskCategoryName',
          align: 'center'
        },
        {
          title: '作业风险名称',
          key: 'riskName',
          align: 'center',
          tooltip: true
        },
        {
          title: '操作',
          width: 150,
          align: 'center',
          slot: 'action'
        }
      ],
      deleteList: [],
      page: {
        total: 0,
        current: 1,
        pageSize: 10,
        totalPage: 0
      }
    }
  },
  methods: {
    //风险类别
    getRiskCategoryFindAll() {
      this.$api.measuresLibrary.getRiskCategoryFindAll().then(res => {
        if (res.code == 200) {
          this.riskCategoryList = res.data
        } else {
          this.$Message.error(res.message)
        }
      })
    },
    //统计风险数量
    getRiskOrderDestroystatRiskCount() {
      let param = {
        isDestroy: 3, //"是否销号 0未销号    1已销号",
        projectId: this.formData.projectTeamId //"项目id",
        //"riskLevel": this.formData.riskLevel,//"作业风险等级(0:全部，1：1级，2：2级，3：3级，4：4级)",
      }
      this.$api.riskElimination
        .getRiskOrderDestroystatRiskCount(param)
        .then(res => {
          if (res.code === 200) {
            this.riskCount = res.data
          } else {
            this.$Message.warning(res.message)
          }
        })
    },
    //列表
    getWbsTabelList() {
      let param = {
        currentPage: this.page.current,
        pageSize: this.page.pageSize,
        whereMap: {
          isDestroy: 3, //"是否销号 0未销号    1已销号",
          projectId: this.formData.projectTeamId, //"项目id",
          riskLevel: this.formData.riskLevel, //"作业风险等级(0:全部，1：1级，2：2级，3：3级，4：4级)",
          pointName: this.formData.constructionPointName, //"工点名称",
          isWork: this.formData.isWork || null, //"工点状态",
          distRiskGrade: parseInt(this.formData.distRiskGrade || 0), //"工点风险等级",
          riskCategoryId: this.formData.riskCategoryId, //"风险类别id",
          riskName: this.formData.riskName //"风险名称",
        }
      }
      this.$api.riskElimination.getRiskOrderDestroyList(param).then(res => {
        if (res.code === 200) {
          this.dictList = res.data.resultObject
          this.page.total = res.data.totalRecord
          this.page.totalPage = res.data.totalPage
        } else {
          this.$Message.warning(res.message)
        }
      })
    },
    //机构树
    getOrgTree() {
      this.orgList = []
      this.list1 = []
      this.$api.measurePlan.getOrgTree().then(res => {
        if (res.code == 200) {
          this.orgList = res.data
          const tree = this.$refs.tree
          this.$nextTick(() => tree.handleSelect(tree.data[0].nodeKey))
        } else {
          this.$Message.error(res.data.msg)
        }
      })
    },
    checkEng(data) {
      //点击机构树
      if (data.length > 0) {
        this.formData.projectTeamId = ''
        this.list1 = []
        let title = data[0].title
        if (data[0].objectId) {
          let enterpriseId = data[0].objectId
          this.list1.push({
            title,
            enterpriseId
          })
          this.getProTree(data[0])
          this.formData.enterpriseId = enterpriseId
          this.$refs.treeSelect.visible = false
        } else {
          this.$Message.warning('请选择' + title + '下的子集')
        }
      }
    },
    //获取项目树
    getProTree(data) {
      this.proList = []
      this.$api.measurePlan.getProList(data.objectId).then(res => {
        if (res.code === 200) {
          if (res.data.length > 0) {
            this.proList = res.data
            if (this.personType == 3) {
              this.formData.projectTeamId = this.proList[0].id
              this.getRiskOrderDestroystatRiskCount()
              this.getWbsTabelList()
            }
          }
        } else {
          this.$Message.error(res.message)
        }
      })
    },
    /* checkPro(data) {//点击项目树
        if (data.length > 0) {
          this.list1 = []
          let proId = data[0].objectId
          let title = data[0].name
          this.list1.push({
            proId,
            title
          })
          this.formData.projectTeamId = proId
          this.$refs.treeSelectPro.visible = false
        }
      },*/
    tabpaneBtn(e) {
      //tab切换
      this.page.current = 1
      this.page.currentPage = 10
      this.formData.riskLevel = e
      this.getWbsTabelList()
    },
    destroyBtn(row, type) {
      //销号
      if (type === 'detail') {
        this.detailModal = true
        this.$api.riskElimination
          .getRiskOrderDestroydetail(row.id)
          .then(res => {
            if (res.code === 200) {
              this.detailData = res.data
            } else {
              this.$Message.warning(res.message)
            }
          })
      } else {
        this.destroyModal = true
        this.formData.description = ''
      }
      this.rowData = row
    },
    saveItem() {
      //保存
      if (!this.formData.description) {
        this.$Message.warning('请输入描述')
        return
      }
      let params = {
        description: this.formData.description, //描述 ,
        id: this.rowData.id, //风险id
        orgType: this.personType, //机构层级， 1集团 2工程公司 3项目部 ,--------需要知道用户的身份
        type: 1 //销号操作类型（1:新增，2:撤销，3:审核，4:签发, 5驳回）
      }
      this.$api.riskElimination
        .getRiskOrderDestroydestroyCreate(params)
        .then(res => {
          if (res.code === 200) {
            this.destroyModal = false
            this.getWbsTabelList()
            this.getRiskOrderDestroystatRiskCount()
            this.$Message.success(res.message)
          } else {
            this.$Message.warning(res.message)
          }
        })
    },
    //搜索
    searchBtn() {
      this.getWbsTabelList()
      this.getRiskOrderDestroystatRiskCount()
    },
    //重置
    resetBtn() {
      this.formData.projectTeamId = ''
      this.formData.name = ''
      this.getWbsTabelList()
    },
    pageChange(current) {
      this.page.current = current
      this.getWbsTabelList(this.parentId)
    },
    sizeChange(size) {
      this.page.current = 1
      this.page.pageSize = size
      this.getWbsTabelList(this.parentId)
    }
  },
  mounted() {
    this.getRiskCategoryFindAll()
    //1集团 2工程公司 3项目部
    if (this.personType === 3) {
      this.columns.splice(1, 2)
      this.getProTree({ objectId: this.userDetail.projectTeamId })
    } else if (this.personType === 1) {
      this.getOrgTree()
      this.getRiskOrderDestroystatRiskCount()
    } else if (this.personType === 2) {
      this.columns.splice(1, 1)
      this.getProTree({ objectId: this.userDetail.enterpriseId })
    }
  }
  /* activated() {
      this.getWbsTabelList();
    }*/
}
</script>

<style lang="scss" scoped>
.data-dictionary {
  height: calc(100% - 0px);
  .col-height100 {
    height: 100%;
    border-right: 1px solid #ebeef1;
    overflow: auto;
    p {
      padding: 10px;
    }
  }
  .col-main {
    padding: 10px;
    .button-s {
      margin-bottom: 15px;
      button {
        margin-right: 15px;
      }
    }
  }
  .tabs_box {
    color: #f00 !important;
  }
  .span_margin10 {
    span {
      margin-right: 30px;
    }
  }
}
.width90 {
  width: 90%;
}
</style>
